<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__STATIC__/css/layui.css">
  <link rel="stylesheet" href="__STATIC__/css/view.css" />
  <link rel="icon" href="/favicon.ico">
  <title>管理后台</title>
</head>

<body class="layui-view-body">
  <div class="layui-content">
    <!--  <div class="layui-page-header">
            <div class="pagewrap">
                <span class="layui-breadcrumb">
                  <a><cite>管理员列表</cite></a>
                </span>
            </div>
        </div> -->
    <div class="layui-row">
      <div class="layui-card">
        <div class="layui-card-body">
          <div class="form-box">
            <button class="layui-btn layui-btn-blue" onclick="openAdd()"><i class="layui-icon">&#xe654;</i>新增</button>
            <table id="demo" lay-filter="test"></table>
            <table class="layui-table" lay-data="{height:'full-200', url:'{:url('User/userlist')}', page:true, id:'test2', skin: 'row', even: true}"
              lay-filter="demo">
              <thead>
                <tr>
                  <th lay-data="{field:'id',sort: true}">ID</th>
                  <th lay-data="{field:'username',Width:'300px'}">用户名</th>
                  <th lay-data="{fixed: 'right', title:'操作', toolbar: '#barDemo',}"></th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" lay-event="del">删除</a>
  </script>
  {include file="common/footer"}
  <script src="__STATIC__/layui.all.js"></script>
  <script>
    var element = layui.element;
    var table = layui.table;
    var form = layui.form;
    //监听行工具事件
    table.on('tool(demo)', function (obj) {
      var data = obj.data;
      //console.log(obj)
      if (obj.event === 'del') {
        layer.confirm('真的删除行么', function (index) {
          userDel(data.id)
          layer.close(index);
        });
      } else if (obj.event === 'edit') {
        editAdd(data.id)
      }
    });

    function openAdd() {
      var that = this;
      //多窗口模式，层叠置顶
      layer.open({
        type: 2 //此处以iframe举例
          ,
        title: '添加用户',
        area: ['500px', '350px'],
        shade: 0,
        maxmin: true,
        offset: 'auto',
        content: "{:Url('User/add')}",
        btn: ['关闭'] //只是为了演示
          ,
        yes: function (index) {
          layer.close(index);
        },
        zIndex: layer.zIndex //重点1
          ,
        success: function (layero) {
          layer.setTop(layero); //重点2
        }
      });
    }

    function editAdd(id) {
      var that = this;
      //多窗口模式，层叠置顶
      layer.open({
        type: 2 //此处以iframe举例
          ,
        title: '编辑',
        area: ['500px', '350px'],
        shade: 0,
        maxmin: true,
        offset: 'auto',
        content: `edit?id=${id}`,
        btn: ['关闭'] //只是为了演示
          ,
        yes: function (index) {
          layer.close(index);
        },
        zIndex: layer.zIndex //重点1
          ,
        success: function (layero) {
          layer.setTop(layero); //重点2
        }
      });
    }
    /*删除*/
    function userDel(id) {
      console.log(id)
      $.ajax({
        type: 'POST',
        url: "{:Url('User/del')}",
        data: {
          "id": id
        },
        dataType: 'text',
        success: function (data) {
          window.location.reload();
        },
        error: function (data) {
          console.log(data.msg);
        },
      });
    }
  </script>
</body>

</html>